<script setup lang="ts">
import * as echarts from 'echarts';
import yantai from "/@/assets/json/yantai.json"
import {onMounted} from "vue";
import {inc} from "nprogress";
onMounted(() => {
  var myChart = echarts.init(document.getElementById('myChart'))
  window.onresize = function(){
    // 图形随窗口变化而变化
    myChart.resize();
  }
  console.log("========mounted")
  // initMyChartt(myChart)
  init1(myChart)
})

const   init1= (mychart) => {
  let that = this;
  echarts.registerMap('yantai', yantai);
  let option = {
    geo3D: {
    map: 'yantai',
    boxWidth: 70,
    boxHeight: 6,
    boxDepth: 70,
    realisticMaterial: {
  roughness:1,//粗糙度，0为完全光滑，1完全粗糙
      textureTiling: 32 //材质细节纹理的平铺
},
//光源的设置
light: {
  main: {
    intensity: 1,
        shadow: true,
        alpha: 150,
        beta: 170
  },
  ambient: {
    intensity: 0
  }
},
//地面的背景颜色
groundPlane: {
  show: true,
      color: 'transparent'
},
//特效设置
postEffect: {
  enable: true
},
//标签样式
label: {
  show: true,
      formatter: function(params) {
    var content = '',
        content = params.name;
    return content;
  },
  distance: 0,
      textStyle: {
    color: '#ffffff',
        fontWeight: 'normal',
        fontSize: 16,
        backgroundColor: 'rgba(255,255,255,0)'
  },
},
itemStyle: {
  color: '#73a4ff',
      borderColor: 'rgb(62,215,213)',
      borderWidth: 1
},
emphasis: {
  label: {
    show: true,
        distance: 10
  },
  itemStyle: {
    color: '#3b7efc',
  }
},
// 用于鼠标的旋转，缩放等视角控制。
viewControl: {
  projection: "perspective", // 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
      autoRotate: true,
  //更多配置可自行查询添加，
}
},
  };

  mychart.setOption(option, true);
}

</script>

<template>
  <div id="myChart" style="width:100vw;height:calc(100vh - 30px);background-color: #9d7878;"></div>
</template>

<style scoped lang="scss">

</style>